<template>
	<view class="container" :class="{'t-navbar--fixed':fixed}">
		<view class="tab ">
			<slot name="body">
				<view class="tab-list">
					<block v-for="(item,index) in tabList" :key="index">
						<view class="tab-item" @tap.stop="selectTab(index)">
							<view v-if="index == 2 && badge > 0" class="title-badge">
								<uni-badge type="error" :text="badge"></uni-badge>
							</view>
							{{item}}<text :class="activeIndex == index ? 'tab-item-b' : ''"></text>
						</view>
					</block>
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "t-title",
		data() {
			return {
				activeIndex: 0
			};
		},
		props: {
			fixed: {
				type: Boolean,
				default: false
			},
			tabList: {
				type: Array,
				default: ['全部', '待支付', '已完成']
			},
			badge: {
				type: Number,
				default: 0
			}
		},
		methods: {
			selectTab(index) {
				console.log(index)
				this.activeIndex = index;
				this.$emit('selectTab', index)
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background: #fff;

		.body {
			height: 20rpx;
			background: red;
		}

		.tab {
			display: flex;
			flex-direction: column;
			padding: 40rpx 0 0;
			background: #ff9000;
			position: relative;
			width: 100%;

			.tab-list {
				display: flex;
				align-items: center;
				height: 100%;

				.tab-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					flex: 1;
					font-size: 28rpx;
					font-weight: 600;
					color: #fff;
					height: 60rpx;
					position: relative;

					.tab-item-b {
						height: 6rpx;
						width: 50rpx;
						background: #FFF;
						margin-top: 10rpx;
					}

					.title-badge {
						position: absolute;
						top: -10rpx;
						right: 24rpx;
					}
				}
			}

		}

		.tab:after {
			width: 140%;
			height: 150%;
			position: absolute;
			left: -20%;
			top: 0;
			z-index: -1;
			content: '';
			border-radius: 0 0 50% 50%;
			background: #ff9000;
		}
	}

	.t-navbar--fixed {
		position: fixed;
		z-index: 800;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		/* #endif */

	}
</style>
